<!doctype html>
<html lang="en">
    <head>
		<meta charset="utf-8">
        <meta name="description" content="LegoCMS">
        <#include "../include_page/link.html"/>
		<script type="text/javascript">
		$(function(){
			refreshTree();
			function refreshTree() {
				var treeUrl = ctx + "/admin/directive/sysPermissionTree";
				ajaxSubmit(treeUrl, null, function(data) {
					var setting = {
						data: {
							simpleData: {
								enable: true,
								idKey : 'code',
								pIdKey : "parentCode"
							}
						},
						callback: {
							onClick: function(event, treeId, treeNode) {
								refreshForm(treeNode.code);
							}
						}
					};
					$.fn.zTree.init($("#permissionTree"), setting, data.simpleTree);
				});
			}
			
			function refreshForm(code) {
				var detailUrl = ctx + "/admin/directive/sysPermission";
			    ajaxSubmit(detailUrl, 'code=' + code, function(data) {
			    	var permission = data.permission;
			    	var form = $('#save-permission-form');
			    	form.resetForm();
			    	form.setForm(permission);
			    	form.find("input[name=code]").attr("readonly", "");
					form.find("input[name='action']").val('modify');
			    	refreshIcon(permission.icon);
			    })
			}
			
			function refreshIcon(icon) {
		    	$('#icon-view').removeClass();
		    	$('#icon-view').addClass(icon);
			}
			
			$('#add').click(function() {
				var nodes = getTree('permissionTree').getSelectedNodes();
				if (isEmpty(nodes)) {
					showMsg("<@t.message 'verify.parent-permission'/>", 5);
					return;
				}
				var form = $('#save-permission-form');
				form.resetForm();
				form.find("input[name=code]").removeAttr("readonly");
        		if (isNotEmpty(nodes)) {
					form.find("input[name='parent.code']").val(nodes[0].code);
				}
				else {
					form.find("input[name='parent.code']").val('');
				}
				form.find("input[name='action']").val('add');
				refreshIcon('');
			});
			
			$('#delete').click(function() {
				var code = $('#save-permission-form').find("[name=code]").val();
				if (isEmpty(code)) {
					showMsg("<@t.message 'verify.permission-delete'/>", 5);
					return;
				}
				window.parent.showConfirm("<@t.message 'permission.delete'/>", "<@t.message 'title.permission-delete'/>", function(){
					var url = ctx + "/admin/permission?action=delete";
					ajaxSubmit(url, "code=" + code, function() {
						$('#save-permission-form').resetForm();
						refreshTree();
						refreshIcon('');
					});
				})
			});
			
			$('#chose-icon').click(function(){
				window.parent.showSimpleDialog("<@t.message 'title.icon-select'/>", $('#icon-modal'), function(id){
					var form = $('#save-permission-form');
					form.find("input[name='icon']").val(id.find('p').html());
					refreshIcon(id.find('p').html());
				})
			})
			
			ajaxForm($('#save-permission-form'), function() {
				refreshTree();
				var code = $('#save-permission-form').find("[name=code]").val();
				refreshForm(code);
			});
		});
		</script>
    </head>
    <body>
       	<div class="row">
			<div class="col-md-3">
				<div class="main-card card">
					<div class="card-body">
						<ul id="permissionTree" class="ztree"></ul>
					</div>
				</div>
			</div>
       		<div class="col-md-9">
				<div class="main-card card">
					<div class="card-body">
		       			<form id="save-permission-form" action="${ctx}/admin/permission" onsubmit="return false;" class="needs-validation" novalidate>
							<input name="action" type="hidden">
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.code'/></label>
								<div class="col-sm-10">
									<input name="code" type="text" class="form-control" required>
									<div class="invalid-feedback">
                                        <@t.message 'verify.code'/>
                                    </div>
								</div>
							</div>
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.name'/></label>
								<#list langTypes as langType>
					                <div class="col-md-4">
										<div class="input-group">
											<input name="lang[${langType_index}].code" class="form-control" readonly data-noreset>
				                            <div class="input-group-append">
												<input name="lang[${langType_index}].name" type="text" required>
				                            </div>
											<div class="invalid-feedback">
                                        		<@t.message 'verify.name'/>
		                                    </div>
	                                    </div>
					                </div>
								</#list>
							</div>
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.url'/></label>
								<div class="col-sm-10">
									<input name="url" type="text" class="form-control">
								</div>
							</div>
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.menu'/></label>
								<div class="col-sm-10">
									<select name="menu" class="form-control custom-select" required>
										<option value="true"><@t.page 'select.ture'/></option>
										<option value="false"><@t.page 'select.false'/></option>
									</select>
									<div class="invalid-feedback">
                                     	<@t.message 'verify.menu'/>
                                    </div>
								</div>
							</div>
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.sort'/></label>
								<div class="col-sm-10">
									<input name="sort" type="text" class="form-control" required>
									<div class="invalid-feedback">
                                     	<@t.message 'verify.sort'/>
                                    </div>
								</div>
							</div>
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.icon'/></label>
								<div class="col-sm-10">
									<div class="input-group">
			                            <div style="text-align: center;border: #e9ecef solid 1px;border-radius: .25rem;padding: 0px 10px;font-size: 1.5rem;">
											<i id="icon-view" class="pe-7s-bandaid"></i>
										</div>
										<input type="text" name="icon" class="form-control">
			                            <div class="input-group-append">
			                                <span class="btn btn-secondary" id="chose-icon"><@t.page 'btn.chose-icon'/></span>
			                            </div>
										<div class="invalid-feedback">
                                     		<@t.message 'verify.icon'/>
	                                    </div>
									</div>
								</div>
							</div>
							<input name="parent.code" type="hidden" data-noreset>
							<div class="position-relative row form-group">
								<label class="col-sm-2 col-form-label"><@t.page 'list.create-time'/></label>
								<div class="col-sm-10">
									<input name="createTime" placeholder="Create Date" class="form-control" readonly>
								</div>
							</div>
							<div class="position-relative row form-check">
								<div class="col-sm-10 offset-sm-2">
									<button class="btn btn-info" type="submit"><@t.page 'btn.save'/></button>
									<span class="btn btn-secondary" id="add"><@t.page 'btn.add'/></span>
									<span class="btn btn-danger" id="delete"><@t.page 'btn.delete'/></span>
								</div>
							</div>
						</form>
					</div>
				</div>
       		</div>
       	</div>
    	<#include "icon-modal.html"/>
    </body>
</html>
